<template>
	<view class="flex chat">
		<view :class="['flex', 'colum-gap-10', 'w100', 'top', orientation ? 'end' : 'start']">
			<view v-if="content && orientation" class="h100 word message-border box max-60 bg-blue padding10"
				style="border-radius: 5%;margin-right: 12rpx;">
				{{ content }}
				<view class="san"></view>
			</view>
			<image :src="pichref" v-if="pichref && orientation" mode="aspectFill"></image>
			<u-avatar :src="imgs"></u-avatar>
			<view v-if="content && !orientation" class="h100 word message-border box max-60 bg-blue padding10"
				style="border-radius: 20%;">{{ content }}</view>
			<image :src="pichref" v-if="pichref && !orientation" mode="aspectFill"></image>
		</view>
	</view>
</template>

<script>
export default {
	props: {
		orientation: {
			type: Boolean,
			default: false
		},
		src: {
			type: String,
			default: ""
		},
		ids: {
			type: String,
		},
		pichref: String,
		content: String,
		type: {
			type: String,
			default: "text"
		}
	},
	onLoad() {
		console.log('this', this.pichref)
	},
	computed: {
		imgs() {
			return "https://roseannepark.love/" + this.$store.getters.getUser.avatar
		}
	}
}
</script>

<style lang="scss" scoped>
.start {
	justify-content: flex-start;
}

.end {
	justify-content: flex-end;
}

.top {
	align-items: flex-start;
}

.width60 {
	width: 60%;
}

.message-border {
	border-radius: 3%;
}

.bg-blue {
	background-color: skyblue;
}

.max-60 {
	max-width: 60%;
}

.inline-flex {
	display: inline-flex;
}

.padding-vertical-50 {
	padding: 50% 0;
}

.word {
	word-break: break-all;
	position: relative;
}

.san {
	position: absolute;
	right: -28rpx;
	top: 50%;
	width: 0;
	height: 0;
	border: 15rpx solid transparent;
	border-left-color: skyblue;
	transform: translateY(-50%);
}

.chat {
	image {
		width: 8rem;
		height: 8rem;
		border-radius: 5%;
	}
}
</style>